<template>
    <div>
       <!-- tab栏 -->
      	 <div class="head">
  	        <image :src="src1" class="headd" resize="cover" @click="back()"></image>
  	        <text class="head1">输入新手机号</text>
      	 </div>
	     <text class="fir">要对您绑定的新手机号进行短信验证哦</text>
	     <div class="phone">
  	     	<text class="ph1">手机号:</text>
  	     	<input type="text" placeholder="请输入手机号" class="text1">
  	     	<text class="text_ph" v-if="show" @click="get()">获取验证码</text>
  	     	<text class="text_ph" v-if="!show">{{count}}秒</text>
	     </div>
	     <div class="phone">
  	     	<text class="ph1">验证码:</text>
  	     	<input type="text" placeholder="请输入短信验证码" class="text1">
	     </div>
          <text class="suue" :class="suree">确认变更</text>
          <text class="tip">变更手机号成功后可使用新号码登录</text>
          <!-- 登录密码错误的弹窗 -->
        <div class="wrap" v-if="show012">
            <div class="wqqq" v-if="show012"></div>
            <div class="wrap-1">
              <div class="wrap-2">
                <text class="wrap-3">登录密码不正确,请重新输入哦</text>
                <div class="wrap-4">
                  <text class="zhaohui11" @click="sure()">确定</text>
                </div>
              </div>
            </div>
         </div>
    </div>
</template>
<style scoped>
  .head{
      width: 100%;
      height: 48px;
      padding-top: 12px;
      box-sizing: border-box;
      line-height: 32px;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      box-shadow: 1px 1px 1px #ccc;
      background-color: #fff;
    }
    .headd{
      width: 15px;
      height: 20px;
      position: absolute;
      left: 12px;
    }
    .head1{
      font-size: 20px;
      font-weight: bold;
      color: #33c179;
    }
    .fir{
      margin-left: auto;
      margin-right: auto;
      margin-top: 30px;
      margin-left: 20px;
      height: 12px;
      line-height: 12px;
      font-size: 12px;
    }
    .phone{
    	width: 100%;
    	height: 15px;
    	align-items: center;
    	flex-direction: row;
    	margin-top: 40px;
    }
    .ph1{
    	height: 15px;
    	line-height: 15px;
    	font-weight: bold;
    	color: #333;
    	font-size: 15px;
    	margin-left: 20px;
    }
    .text_ph{
    	color: #33c179;
    	font-size: 15px;
    }
    .text1{
    	margin-left: 10px;
    	font-size: 15px;
    	text-align: center;
    }
    .suue{
      margin-left: auto;
      margin-right: auto;
      margin-top: 86px;
      width: 118px;
      height: 31px;
      text-align: center;
      line-height: 31px;
      font-size: 15px;
      color: 15px;
      font-weight: bold;
      background-color: #999;
      border-radius: 25px;
      color: #fff;
    }
    .suree{
      background-color: #33c179;
    }
    .tip{
      height: 12px;
      line-height: 12px;
      color: #999;
      font-size: 12px;
      margin-left: auto;
      margin-right: auto;
      margin-top: 20px;
    }
    .wrap{
      width: 100%;
      height: 100%;
      position: fixed;
      /*background-color: #000;*/
      z-index: 9999;
      justify-content: center;
      align-items: center;
      opacity: 1;
    }
    .www123{
      color: #33c179;
    }
    .wqqq{
      width: 100%;
      height: 100%;
      position: fixed;
      background-color: #000;
      z-index: 299;
      opacity: .9;
      justify-content: center;
      align-items: center;
    }
    .wrap-1{
      width: 237px;
      height: 168px;
      border-radius: 10px;
      /*background-image: url(http://192.168.2.123:8080/img/dialog_one.png);*/
      background-size: 237px 168px;
      opacity: 1;
      box-sizing: border-box;
      padding-top: 28px;
      z-index: 300;
      background-color: #fff;
    }
    .wrap-2{
      width: 200px;
      height: 100px;
      justify-content: center;
      align-items: center;
      margin-left: 23px;
      opacity: 1;
      /*flex-direction: row;*/  
    }
    .wrap-3{
      justify-content: center;
      align-items: center;
      font-size: 14px;
      opacity: 1;
      flex-direction: row;
    }
    .wrap-4{
      flex-direction: row;
      width: 220px;
      height: 31px;
      margin-top: 24px;
      justify-content: space-around;
      /*background-color: pink;*/
      align-items: center;
      opacity: 1;
    }
    .zhaohui11,.duanxin11{
      width: 83px;
      height: 31px;
      border-radius: 25px;
      background-color: #33c179;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 16px;
      text-align: center;
      line-height: 31px;
      opacity: 1;
    }
</style>
<script>
  export default {
    data () {
        return {
            src1: 'http://192.168.2.123:8080/img/index_back.png',//返回
           	change1: '',
           	show: true,
           	count: '59',
            suree: '',
            show012: false,
        }
    },
    components: {
       
    },
    created () {
        
    },
    methods: {
      // 点击返回
      back(){
        this.$router.back(-1);
      },
      // 点击变更手机号图标
      changephone(){
      	this.$router.push('/');
      },
      // 点击获取验证码
      get(){
      	this.show = false;
      },
      // 验证码出错的弹窗
      sure(){
        this.show012 = false;
      }
    }
}
</script>